WebStormでTypeScriptを使おう
WebStorm6がリリース
最強のJavaScript用IDEと名高いWebStromが、先日メジャーバージョンアップして6.0になりました。 いろいろな機能が追加されてます。
- TypeScript coding support
- Debugging with source maps
- Convenient to use JS libraries
- Fresh IDE look and feel & dark UI
今回のバージョンアップでTypeScriptもサポートされました。 こんな感じでシンタックスハイライトもできますし、補完も効くようになってます。
環境構築方法
今回使用した動作環境は以下のとおりです。
- OS : MacOS X 10.7.4
- WebStorm : 6.0
- Node.js : v0.8.15
- npm : 1.1.66
- node管理ツール : nvm
サンプル用ディレクトリをつくっておきます。 また、今回はTypeScriptを利用するので、グローバルオプションをつけてインストールしておきましょう。
% mkdir sample % npm install -g typescript
TypeScriptを自動でコンパイルできるようにする
File→Open Directoryで、先程作成したsampleディレクトリを指定します。
New→TypeScriptFileを選択し、greet.tsファイルを作成しましょう。
そして、greet.tsをこんなふうに記述します。
class Greeter {
constructor(public greeting: string) {
console.log("constructor");
}
greet() {
return this.greeting;
}
};
var greeter = new Greeter("Hello, world!");
var str = greeter.greet();
console.log(str);
Preferences→File Watchersを選択し、tsファイルに対してFile Watcherを作成します。
Programにはtscコマンドのパス、Environment variablesにはPATH環境変数で、nodeのパスを指定しましょう。
tsファイルを何か変更して保存してみてください。tscコンパイルされてjsファイルが生成されます。 greet.tsをドリルダウンするとjsファイルとsourceMapファイルが見れますね。
まとめ
WebStormは有料のIDEですが、30日の試用版もあります。 よろしければ試してみてください。
参考サイトなど
- WebStrom公式: http://www.jetbrains.com/webstorm/index.html
